 /* 1、为您要设置滚动的对象设置容器，并命名class，如class="ylMarquee"
 * 2、将您要滚动的对象置入<ul></ul>中，并添加li标签，li标签中可以是图片、文字或表格……
 * 3、此版本需要您设置每个li列表的宽度或高度一至
 *  <div class="ylMarquee">
 *     <ul>
 *          <li><img src="image/1.jpg" alt="1"></li>
 *          <li><img src="image/2.jpg" alt="2"></li>
 *          <li><img src="image/3.jpg" alt="3"></li>
 *      </ul>
 *  </div>
 * 4、设置ylMarquee的height或width样式——向上滚动必须设置height的大小，向左滚动必须设置width的大小，否则页面将显示不正常。
 * 5、在页面中添加jQuery语句，调用此插件，并对相关参数进行设置,如：
 * <script type="text/javascript">
 * $(document).ready(function(){
 *  $(".stroll").jMarquee({
 *     visible:3,
 *     step:3,
 *     direction:"left"
 *   });
 *});
 * </script>
 * 6、插件相关参数：
 * visible:页面可见元素（图片）个数，默认为1，必须参数。
 * step:滚动步长，整数，默认为1，增大此数可加快滚动速度，设为0，则不进行滚动。
 * direction:滚动方向，有"left"（向左滚动）和"up"（向上滚动）两个参数，注意设置时一定要加英文的双引("")号或单引号('')。
 * direction:滚动方向，有"left"（向左滚动）和"up"（向上滚动）两个参数，注意设置时一定要加英文的双引("")号或单引号('')
 */

(function($) { 
 $.fn.jMarquee = function(o) {
    o = $.extend({
   // speed:6000,
    step:2,//滚动步长
    direction:"left",//滚动方向
    visible:2//可见元素数量
    }, o || {});
    //获取滚动内容内各元素相关信息
    var i=0;
    var div=$(this);
    var className = o.className;
    var courseDiv=$(o.className);
    var courseNum=$(o.className+' div'+o.childrenClassName);
    var divSize=courseNum.size();
    var childrenClassNum = courseNum.size();
    if(o.direction=="left")
        courseNum.css("float","left");
    var liWidth=o.width;
    var liHeight=courseNum.height();
    var ulHeight=liHeight*divSize;
    var ulWidth=liWidth*divSize;
	var orientation = Math.abs(o.orientation);
  
    //如果对象元素个数大于指定的显示元素则进行滚动，否则不滚动。
    if(divSize>o.visible){
		courseDiv.wrapInner('<div class="courseContent" style="position: relative;"></div>');
		var courseDivContent = $('.courseContent',div);
        $('div.courseContent').append(courseNum.slice(0,o.visible).clone());  //复制前o.visible个li，并添加到ul的最后
		var courseNumLeft=$(o.className+' div'+o.childrenClassName);
		var divSizeLeft=courseNumLeft.size();
        var ulWidthLeft=liWidth*divSizeLeft;
        li=$('div '+o.childrenClassName);
        divSize=li.size();
        $(div.prev('.course-left')).empty();
        $(div.prev('.course-left')).append('<a href="javaScript:void(0);"><img src="http://i.xueersi.com/pic/back_page_1.jpg"></a>');
        $(div.next('.course-right')).empty();
        $(div.next('.course-right')).append('<a href="javaScript:void(0);"><img src="http://i.xueersi.com/pic/nex_page_1.jpg"></a>');
        if($('.course-num').size()!=0){
           var courseNum = className.split('_');
           var courseNumId = courseNum[1];
           var courseHtml='';
           $('.course-num_'+courseNumId).empty();
           for(var i=0;i<childrenClassNum/o.visible;i++){
			   var countLi = i+1
               if(i==0){
                   courseHtml='<li style="cursor: pointer;" title='+countLi+' class="on"><a  href="javaScript:void(0);">1</a></li>';
               }else{
                   courseHtml='<li style="cursor: pointer;" title='+countLi+'><a href="javaScript:void(0);">1</a></li>';
               }
               $('.course-num_'+courseNumId).append(courseHtml);
               $('.course-num_'+courseNumId+' > li').eq(i).click(function(){
                   var testNum = $(this).attr('title')-1;
                   for(var i=0;i<$('.course-num_'+courseNumId+' > li').size();i++){
                       if($('.course-num_'+courseNumId+' > li').eq(i).hasClass('on')){
                            var endNum = i;
                            $('.course-num_'+courseNumId+' > li').eq(i).removeClass('on');
                       }
                   }
                   $('.course-num_'+courseNumId+' > li').eq(testNum).addClass('on');
                   var leftNum=div.scrollLeft();
                   leftNum+=parseInt(o.step*liWidth*(testNum-endNum));
				   div.animate({ 
						scrollLeft: leftNum+'px'
					}, 500 );
               });
           }
        }
		//orientation不为空给元素定位
		if(orientation){
			if(orientation<courseNum.size()||orientation==courseNum.size()){
			   var leftNum=div.scrollLeft();
			   leftNum+=parseInt(o.step*liWidth*(orientation-1));
			   div.animate({ 
					scrollLeft: leftNum+'px'
				  }, 1);
			}
		}
        
        //给滚动内容添加相关CSS样式
        div.css({"position":"relative",overflow:"hidden"});
        courseDivContent.css({"position":"relative",margin:"0",padding:"0","list-style":"none"});
        li.css("position","relative");
        
        switch(o.direction){
            case "left":
                div.css("width",(liWidth*o.visible)+"px");
                courseDivContent.css("width",(liWidth*divSize)+"px");
                li.css("float","left");
                break;
            case "up":
                div.css({"height":(liHeight*o.visible)+"px"});
                courseDivContent.css("height",(liHeight*divSize)+"px");
                break;
        }
        $(div.prev('.course-left')).click(function(){
			if(div.scrollLeft()==0){
                div.scrollLeft(ulWidthLeft-o.step*liWidth);
            }
			var leftNum=div.scrollLeft();
			leftNum-=parseInt(o.step*liWidth);
			div.animate({ 
				scrollLeft: leftNum+'px'
			  }, 500 );
			if($('.course-num').size()!=0){
				var liName = '.course-num_'+courseNumId;
				var liNum =0;
				for(var i = 0 ;i<$(liName+' li').size();i++){
					if($(liName+' li').eq(i).hasClass('on')){
					   if(i==0){
						  liNum=$(liName+' li').size()-1;
						}else{
						  liNum=i-1;
						}
					   $(liName+' li').eq(i).removeClass('on');
					   $(liName+' li').eq(liNum).addClass('on');
					   return;
					}
				}
			}
	    });
        $(div.next('.course-right')).click(function(){
			ylMarquee();
	    });
       // var MyMar=setInterval(ylMarquee,o.speed);
        
        courseDivContent.hover(
           // function(){clearInterval(MyMar);},
           // function(){MyMar=setInterval(ylMarquee,o.speed);}
        );
    };
    
    function ylMarquee(){
        if(o.direction=="left"){
            if(div.scrollLeft()==ulWidth){
                div.scrollLeft(0);
            }
			var leftNum=div.scrollLeft();
			leftNum+=parseInt(o.step*liWidth);
			div.animate({ 
				scrollLeft: leftNum+'px'
			}, 500 );
			if($('.course-num').size()!=0){
				var liName = '.course-num_'+courseNumId;
				var liNum =0;
				for(var i = 0 ;i<$(liName+' li').size();i++){
					if(liNum+1==$(liName+' li').size()){
					  liNum=0;
					}else{
					  liNum++;
					}
					if($(liName+' li').eq(i).hasClass('on')){
					   $(liName+' li').eq(i).removeClass('on');
					   $(liName+' li').eq(liNum).addClass('on');
					   return;
					}
				}
			}
        }
		
        if(o.direction=="up"){
            if(div.scrollTop()>=ulHeight){
               div.scrollTop(0);
            }
            else{
               var topNum=div.scrollTop();
               topNum+=parseInt(o.step*liWidth);
               div.scrollTop(topNum);
            }
        }
    };
}; 
     
})(jQuery);
     
   
     

